
import './index.scss'

import { useMount } from 'ahooks'
import { useState, lazy } from 'react'

import Outlet from './Outlet'
import { GetIndexedDB } from '../Utils/IndexedDB'

const url = 'https://image.ljkjkf.com/intellisiteSystem_TieKe/HeYi/'
const homeKey = 'e5400b85-2301-4003-83b0-3a07cdd738a9'

const StartPage = () => {
    const [Theme, setTheme] = useState()
    const [STYLE, setSTYLE] = useState()
    const [ROUTER, setROUTER] = useState()
    const [NavTemp, setNavTemp] = useState()

    useMount(async () => {
        const router = await GetIndexedDB('router')
        const style = await GetIndexedDB('style')
        const { Theme, Table, SmallTitle } = style
        const STYLE = Object.fromEntries(Object.entries({ ...Table, ...SmallTitle }).map(([key, value]) => [`--${key}`, value]))
        setTheme(Theme)
        setSTYLE(STYLE)
        setROUTER(router)

        // 临时获取方式
        const [id] = window.location.hostname.split('.')
        const temp = lazy(() => import(`./Nav/${id}.jsx`))
        setNavTemp(temp)
    })

    if (Theme && NavTemp) {
        return (
            <div className='StartPage' style={STYLE}>
                <div className='BackBox'>
                    <img className='ImageBack' src={url + Theme.BackUrl} alt="" />
                    {Theme.NavSwitch && <img className='ImageNav' style={{ height: Theme.NavHeight }} src={url + Theme.NavUrl} alt="" />}
                    {Theme.BtmSwitch && <img className='ImageBtm' style={{ height: Theme.BtmHeight }} src={url + Theme.BtmUrl} alt="" />}
                    {Theme.LeftSwitch &&
                        <img
                            className='ImageLeft'
                            src={url + Theme.LeftUrl}
                            style={{
                                transform: `rotateY(${Theme.LeftRotate ? 180 : 0}deg)`,
                                width: Theme.LeftWidth + '%',
                                height: Theme.LeftHeight + '%',
                                top: Theme.LeftTop + '%',
                                left: Theme.LeftMargin + '%',
                            }}
                            alt=""
                        />
                    }
                    {Theme.RightSwitch &&
                        <img
                            className='ImageRight'
                            src={url + Theme.RightUrl}
                            style={{
                                transform: `rotateY(${Theme.RightRotate ? 180 : 0}deg)`,
                                width: Theme.RightWidth + '%',
                                height: Theme.RightHeight + '%',
                                top: Theme.RightTop + '%',
                                right: Theme.RightMargin + '%',
                            }}
                            alt=""
                        />
                    }
                </div>
                <NavTemp router={ROUTER} homeKey={homeKey} />
                <Outlet pad={Theme} homeKey={homeKey} router={ROUTER} />
            </div>
        )
    }


};

export default StartPage;